﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SheQuSheYe.aspx.cs" Inherits="MiaoWeiProject.tanlu.SheQuSheYe" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            font-size: 12px;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
        /*头部样式*/
        #heard {
            width: 100%;
            height: 70px;
            /*background-color:#e7e2eb;*/
            background: url('/images/nav-bg.png') repeat-x left top;
            display: flex;
        }

        #heard_conet {
            height: 50px;
            margin: 10px auto;
            width: 75%;
            /*border:1px solid red;*/
            display: flex;
            justify-content: space-between;
        }

        #conter_left {
            width: 275px;
            height: 50px;
            /*border:1px solid red;*/
            background: url('/images/nav-logo-2019-0826.png') no-repeat left center;
        }

        #conter_zhong {
            width: 60%;
            height: 50px;
            /*border:1px solid red;*/
        }

            #conter_zhong ul {
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_zhong ul li {
                    /*width:18%;*/
                    /*border:1px solid green;*/
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                }

                    #conter_zhong ul li a {
                        padding: 7px 27px;
                        /*border:1px solid pink;*/
                        color: #666;
                        font-size: 1.2em;
                        border-radius: 18px;
                    }

                    #conter_zhong ul li i.nav-new {
                        display: inline-block;
                        width: 39px;
                        height: 20px;
                        background: url('/images/nav-new.png') no-repeat left top;
                        vertical-align: middle;
                        margin-left: 4px;
                    }
        /*悬浮导航样式*/
        /*#conter_zhong ul li a:*/ .hover {
            color: #f70;
            background-color: #e0dce4;
            box-shadow: 2px 2px 1px #c5c0cc inset;
        }

        #conter_right {
            width: 8%;
            height: 50px;
            /*border:1px solid red;*/
        }

            #conter_right ul {
                height: 50px;
                line-height: 50px;
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_right ul li {
                    text-align: center;
                }

                    #conter_right ul li a {
                        font-size: 1.1em;
                        color: #666;
                    }

                        #conter_right ul li a:hover {
                            color: #f70;
                        }
        /*点击导航样式*/
        .yangshi {
            color: #fff;
            background-color: #e75c77;
            box-shadow: 2px 2px 1px #c42f4c inset;
        }




        /*中间样式*/
        #zhongjian {
            height: 100%;
            width: 100%;
            border: 1px solid red;
            background-color:#f0eff0;
        }
        /*头部搜索样式*/
        #zhongjian_Sousuo {
            width: 100%;
            height: 217px;
            border: 1px solid green;
            background-image: url(../tanlu/tanluimages/搜索图片.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: relative;
        }

            #zhongjian_Sousuo a {
                color: #ffffff;
                font-size: 14px;
                position: absolute;
                left: 13%;
                top: 15%;
            }

                #zhongjian_Sousuo a.dinwei {
                    color: #ffffff;
                    font-size: 14px;
                    position: absolute;
                    left: 15.5%;
                    top: 15%;
                }

        #shurukuan {
            border: 1px solid #fff;
            background-color: #332e31;
            width: 400px;
            height: 45px;
            border-radius: 40px;
            font-size: 17px;
            color: #fff;
        }

        #go {
            height: 45px;
            width: 45px;
            background-color: #fff;
            color: #302b2f;
            font-size: 17px;
            border-radius: 23px;
            border: 1px solid #fff;
            margin-left: 15px;
        }

        #soushufanwei {
            width: 480px;
            height: 50px;
            border: 1px solid #fff;
            position: absolute;
            left: 35%;
            top: 53%;
        }
        /*类型*/
        #leixin {
            width: 100%;
            background-color: #fff;
            border: 1px solid #5486cb;
            height: 80px;
            position: relative;
        }

        #leixin_ul {
            display: flex;
            position: absolute;
            left: 13%;
            top: 35%;
        }

            #leixin_ul li a {
                font-size: 17px;
                color: #666;
                margin-right: 50px;
            }

        #faxingtie {
            position: absolute;
            right: 13%;
            top: 25%;
        }
        /*最新与热帖*/
        #zuixinyuretie {
            width: 75%;
            border: 1px solid #f70;
            height: 50px;
            margin: 0 auto;
            line-height: 50px;
        }

        #leixin_ul2 {
            display: flex;
            margin-top: 10px;
        }

            #leixin_ul2 li {
                width: 90px;
                height: 25px;
                /*border:1px solid #f70;*/
                line-height: 25px;
                text-align: center;
                margin-left: 10px;
                border-radius: 25px;
            }

                #leixin_ul2 li:hover {
                    background-color: #e75c77;
                }

                #leixin_ul2 li a:hover {
                    color: #fff;
                }

                #leixin_ul2 li a {
                    font-size: 14px;
                    color: #666;
                }



        /*内容样式*/

        #neiro {
            width: 75%;
            height: 1000px;
            border: 1px solid #c42f4c;
            margin: 0px auto;

        }
        #liebiao{
            width:100%;
            border:1px solid red;
            margin:0 ;
            overflow:hidden;
        }
        .list-content {
            width: 96.6%;
            position: relative;
            border-radius: 5px;
        }

        .content-title {
            background-color: #f7f9fa;
            width: 103.5%;
            color: #a9b2bb;
        }

        .list-content p {
            background: url("lyimages/class-disc.png") no-repeat 2px center;
            color: #a9b2bb;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px dashed #e3e1e6;
            font-size: 16px;
            margin-left: 20px;
        }

            .list-content p a {
                color: #000000;
            }

        .float-box {
            float: right;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            width: 310px;
            text-align: center;
        }

            .float-box span {
                float: left;
            }

        .time {
            width: 130px;
            font-size: 14px;
            margin-left: -300px;
        }

        .state {
            width: 100px;
            font-size: 14px;
            margin-left: -50px;
        }

        .duration {
            width: 100px;
            font-size: 14px;
            margin-left: 100px;
        }

        .huahan {
            display: flex;
            background: linear-gradient( #fafafb 50%, #eeebf0);
            width: 100%;
            height: 50px;
            line-height: 50px;
            color: #666;
            position:relative;
        }

        .yido1 {
            position:absolute;
            left:51%;
            font-size: 15px;
        }

        .yido2 {
             position:absolute;
            left:66%;
            font-size: 15px;
        }

        .yido3 {
             position:absolute;
            left:90%;
            font-size: 15px;
        }

        .yido4 {
            font-size: 15px;
        }
        #gao{
            height:100%;
        }


        
       /*尾部样式*/
        #weibu{
            height:144px;
            width:100%;
            border:1px solid green;
            display:flex;
            background: url('/images/footer-bg.jpg') repeat-x left top;
        }
        #weibu_zhong{
            width:75%;
            height:80px;
            margin: 30px auto;
    justify-content:space-between;
            /*border:1px solid pink;*/
            display:flex;
        }
        #weibu_left{
            height:100%;
            width:25%;
            /*border:1px solid black;*/
            border-right:2px solid  #b7b3c1;
        }
        #weibu_right{
            height:100%;
            width:65%;
            /*border:1px solid blue;*/
        }
        #weibu_right_top{
            height:50%;
            width:100%;
            /*border:1px solid red;*/
        }
           #weibu_right_down{
            height:50%;
            width:100%;
            /*border:1px solid black;*/
        }
           #weibu_right_top ul{
               display:flex;
               justify-content:space-between;
               overflow:hidden;
           }
              #weibu_right_top ul li{
                  height:35px;
                  line-height:35px;
              }
               #weibu_right_top ul li a{
                   color: #666;
                   font-size:1.1em;
               }
                #weibu_right_top ul li a:hover{
                    color: #f70;
                }
                #weibu_right_top ul li.link-line{
                      color: #666;
                    padding: 0 16px;
                }
                #weibu_right_down p{
                    font-size:1.2em;
                    color: #6f7b91;
                    height:35px;
                    line-height:35px;
                }
    </style>
     <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //页面加载事件
            function baogo() {
                $.ajax({
                    type: "post",
                    url: "neiro.ashx",
                    dataType: "json",
                    success: function (result) {
                        //返回成功
                        //遍历JSON数组
                        $.each(result, function (i, item) {
                            var biaoti = item.FaTieTypeTitle;
                            console.log(biaoti);
                            var shijian = item.FaTieTime;
                            new Date(parseInt(shijian.substr(6, 13))).toLocaleString();
                            console.log(shijian);
                            var dianjilu = item.DianJiRate;
                            console.log(dianjilu);
                            var yonghuxinmi = item.UserName;
                            console.log(yonghuxinmi);
                            //alert("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + dianjilu + "</p><p class='yido2'>" + shijian + "</p><p class='yido3'>" + yonghuxinmi + "</p> </li>");
                            $("#liebiao").children("ul").append("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + yonghuxinmi + "</p><p class='yido2'>" + new Date(parseInt(shijian.substr(6, 13))).toLocaleString() + "</p><p class='yido3'>" + dianjilu + "</p> </li>");

                        });
                    }
                });
            };
            baogo();

            $(".li").hover(function () {
                $(this).addClass("hover");
                $(this).css({ "color": " #f70" });
                //$(this).parent().siblings().children().removeClass("hover");
            }, function () {
                $(this).removeClass("hover");
                $(this).css({ "color": "#666" });
                //$(this).parent().siblings().children().removeClass("hover");
            }
            );
            $(".li").click(function () {
                $(this).addClass("yangshi");
                $(this).css({ "color": "white" });
                $(this).parent().siblings().children().removeClass("yangshi");
            });
            //返回顶部
            $(document).ready(function () {
                //首先将#btn隐藏
                $("#btn").hide();
                //当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
                $(function () {
                    $(window).scroll(function () {
                        if ($(window).scrollTop() > 50) {
                            $("#btn").fadeIn(200);
                        } else {
                            $("#btn").fadeOut(200);
                        }
                    });
                    //当点击跳转链接后，回到页面顶部位置
                    $("#btn").click(function () {
                        $('body,html').animate({
                            scrollTop: 0
                        },
                        500);
                        return false;
                    });
                });
            });
            //技术交流
            $("#leixin_ul li:eq(0)").click(function () {
                $("#liebiao").children("ul").html("");
                $.ajax({
                    type: "post",
                    url: "neiro1.ashx",
                    dataType: "json",
                    success: function (result) {
                        //返回成功
                        //遍历JSON数组
                        $.each(result, function (i, item) {
                            var biaoti = item.FaTieTypeTitle;
                            var shijian = item.FaTieTime;
                            new Date(parseInt(shijian.substr(6, 13))).toLocaleString();
                            var dianjilu = item.DianJiRate;
                            var yonghuxinmi = item.UserName;
                            //alert("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + dianjilu + "</p><p class='yido2'>" + shijian + "</p><p class='yido3'>" + yonghuxinmi + "</p> </li>");
                            $("#liebiao").children("ul").append("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + yonghuxinmi + "</p><p class='yido2'>" + new Date(parseInt(shijian.substr(6, 13))).toLocaleString() + "</p><p class='yido3'>" + dianjilu + "</p> </li>");

                        });
                    }
                });
            });
            //作品分享
            $("#leixin_ul li:eq(1)").click(function () {
                $("#liebiao").children("ul").html("");
                $.ajax({
                    type: "post",
                    url: "neiro2.ashx",
                    dataType: "json",
                    success: function (result) {
                        //返回成功
                        //遍历JSON数组
                        $.each(result, function (i, item) {
                            var biaoti = item.FaTieTypeTitle;
                            var shijian = item.FaTieTime;
                            new Date(parseInt(shijian.substr(6, 13))).toLocaleString();
                            var dianjilu = item.DianJiRate;
                            var yonghuxinmi = item.UserName;
                            //alert("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + dianjilu + "</p><p class='yido2'>" + shijian + "</p><p class='yido3'>" + yonghuxinmi + "</p> </li>");
                            $("#liebiao").children("ul").append("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + yonghuxinmi + "</p><p class='yido2'>" + new Date(parseInt(shijian.substr(6, 13))).toLocaleString() + "</p><p class='yido3'>" + dianjilu + "</p> </li>");

                        });
                    }
                });
            });
            //官方发布
            $("#leixin_ul li:eq(2)").click(function () {
                $("#liebiao").children("ul").html("");
                $.ajax({
                    type: "post",
                    url: "neiro3.ashx",
                    dataType: "json",
                    success: function (result) {
                        //返回成功
                        //遍历JSON数组
                        $.each(result, function (i, item) {
                            var biaoti = item.FaTieTypeTitle;
                            var shijian = item.FaTieTime;
                            new Date(parseInt(shijian.substr(6, 13))).toLocaleString();
                            var dianjilu = item.DianJiRate;
                            var yonghuxinmi = item.UserName;
                            //alert("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + dianjilu + "</p><p class='yido2'>" + shijian + "</p><p class='yido3'>" + yonghuxinmi + "</p> </li>");
                            $("#liebiao").children("ul").append("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + yonghuxinmi + "</p><p class='yido2'>" + new Date(parseInt(shijian.substr(6, 13))).toLocaleString() + "</p><p class='yido3'>" + dianjilu + "</p> </li>");

                        });
                    }
                });
            });
            //妙味图书
            $("#leixin_ul li:eq(3)").click(function () {
                $("#liebiao").children("ul").html("");
                $.ajax({
                    type: "post",
                    url: "neiro4.ashx",
                    dataType: "json",
                    success: function (result) {
                        //返回成功
                        //遍历JSON数组
                        $.each(result, function (i, item) {
                            var biaoti = item.FaTieTypeTitle;
                            var shijian = item.FaTieTime;
                            new Date(parseInt(shijian.substr(6, 13))).toLocaleString();
                            var dianjilu = item.DianJiRate;
                            var yonghuxinmi = item.UserName;
                            //alert("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + dianjilu + "</p><p class='yido2'>" + shijian + "</p><p class='yido3'>" + yonghuxinmi + "</p> </li>");
                            $("#liebiao").children("ul").append("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + yonghuxinmi + "</p><p class='yido2'>" + new Date(parseInt(shijian.substr(6, 13))).toLocaleString() + "</p><p class='yido3'>" + dianjilu + "</p> </li>");

                        });
                    }
                });
            });
            //搜索按钮
            $("input#go").click(function () {
                //alert("1");
               var zhi= $("#shurukuan").val();
                //alert($("#shurukuan").val());
                $("#liebiao").children("ul").html("");
                $.ajax({
                    type: "post",
                    url: "sosuannio.ashx?cid="+zhi,
                    dataType: "json",
                    success: function (result) {
                        //返回成功
                        //遍历JSON数组
                        $.each(result, function (i, item) {
                            var biaoti = item.FaTieTypeTitle;
                            var shijian = item.FaTieTime;
                            new Date(parseInt(shijian.substr(6, 13))).toLocaleString();
                            var dianjilu = item.DianJiRate;
                            var yonghuxinmi = item.UserName;
                            //alert("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + dianjilu + "</p><p class='yido2'>" + shijian + "</p><p class='yido3'>" + yonghuxinmi + "</p> </li>");
                            $("#liebiao").children("ul").append("<li class='huahan'><p class='yido4'>" + biaoti + "</p><p class='yido1'>" + yonghuxinmi + "</p><p class='yido2'>" + new Date(parseInt(shijian.substr(6, 13))).toLocaleString() + "</p><p class='yido3'>" + dianjilu + "</p> </li>");

                        });
                    }
                });
            });

        });
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
        <%--  头部--%>
        <div id="heard">
            <div id="heard_conet">
                <div id="conter_left"></div>
                <div id="conter_zhong">
                    <ul>
                        <li><a href="#" class="li">首页</a></li>
                        <li><a href="#" class="li">课程</a></li>
                        <li><a href="#" class="li">视频学习</a></li>
                        <li><a href="#" class="li">尊享视频<i class="nav-new"></i></a></li>
                        <li><a href="#" class="li">社区</a></li>
                    </ul>
                </div>
                <div id="conter_right">
                    <ul>
                        <li><a href="#">登录</a></li>
                        <li>|</li>
                        <li><a href="#">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <%--中间内容--%>
        <div id="zhongjian">
            <%--头部搜索样式--%>
            <div id="zhongjian_Sousuo">
                <p><a href="#">首页></a><a class="dinwei" href="Faxingtie.aspx">社区</a></p>
                <div id="soushufanwei"><p><asp:TextBox ID="shurukuan" runat="server" placeholder="请输入关键字"></asp:TextBox><input type="button" id="go" value="GO" /></p></div>
            </div>
            <%--类型--%>
            <div id="leixin">
                <ul id="leixin_ul">
                     <li><a href="#">技术交流</a></li>
                     <li><a href="#">作品分享</a></li>
                     <li><a href="#">官方发布</a></li>
                     <li><a href="#">妙味图书</a></li>
                </ul>
                <p id="faxingtie"><a href="Faxingtie.aspx"><img src="../tanlu/tanluimages/发新帖.png"" /></a> </p>
            </div>
            <%--最新与热帖--%>
            <div id="zuixinyuretie">
               <%--<div class="zuixinyuretie_yanshi"> <a class="zuixinyuretie_zuixin" href="#">最新</a></div>
                <div class="zuixinyuretie_yanshi"><a class="zuixinyuretie_zuixin2" href="#">热帖</a></div>--%>
                <ul id="leixin_ul2">
                     <li><a href="#">最新</a></li>
                     <li><a href="#">热帖</a></li>
                </ul>
            </div>

            <%--内容--%>
            <div id="neiro">
                <%--<asp:GridView ID="GridView1" runat="server" Height="100%" Width="100%" AllowPaging="True" OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
                    <Columns>
                        <asp:BoundField DataField="FaTieTypeTitle" HeaderText="主题" SortExpression="FaTieTypeTitle" />
                        <asp:BoundField DataField="UserName" HeaderText="作者" SortExpression="UserName" />
                        <asp:BoundField DataField="FaTieTime" HeaderText="发布时间" SortExpression="FaTieTime" />
                        <asp:BoundField DataField="DianJiRate" HeaderText="点击率" SortExpression="DianJiRate" />
                        <asp:HyperLinkField DataTextField="FaTieTypeTitle" HeaderText="连接" NavigateUrl="ZhuCe.aspx" />
                    </Columns>
                </asp:GridView>--%>
                   <%--列表--%>
        <div id="liebiao">
                    <ul id="gao">
                        <li>
                              <%--  <div class="top-horn"></div>
                                <div class="computer"></div>--%>
                                <div class="list-content">
                                    <div class="content-title">
                                        <div class="float-box">
                                            <span class="time">作者</span>
                                            <span class="state">发布时间</span>
                                            <span class="duration">点击率</span>
                                        </div>
                                        <p>主题</p>

                                    </div>
                                </div>
                        </li>
                    </ul>
                        <%--<li class="huahan">
                            <p class="yido4">类似时间轴，实现鼠标滚动时右侧导航相对应点亮</p>
                            <p class="yido1">11111</p>
                            <p class="yido2">2013-12-1522:21</p>
                            <p class="yido3">妙味用户</p>
                        </li>--%>
                    
        </div>

            </div>





            <a href="javascript:;" id="btn" title="回到顶部"style="width:50px; 
         height:50px; position:fixed; right:50px; bottom:10px; 
         background:url('../tanlu/tanluimages/顶部按钮.jpg') no-repeat; " >
       </a>
        </div>
        <%--  尾部内容--%>
        <div id="weibu">
            <div id="weibu_zhong">
                <div id="weibu_left">
                    <img src="../images/weibumiaowei.jpg" />
                </div>
                <div id="weibu_right">
                    <div id="weibu_right_top">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">课程</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">视频学习</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">尊享视频</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">社区</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">关于我们</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">常见问题</a></li>

                        </ul>
                    </div>
                    <div id="weibu_right_down">
                        <p>京ICP备08102442号-1 2007-2019 MIAOV.COM 版权所有</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
